<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/10 00:01
 -->
<template>
  <div class="page">
    <!--    <vxe-toolbar>-->
    <!--      <template #buttons>-->
    <!--        <vxe-button @click="$refs.xTable.setAllTreeExpand(true)">展开所有</vxe-button>-->
    <!--        <vxe-button @click="$refs.xTable.setAllTreeExpand(false)">收起所有</vxe-button>-->
    <!--      </template>-->
    <!--    </vxe-toolbar>-->

    <div class="bg-[#fff] p-12px pb-0">
      <el-form label-width="80px" label-position="right">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="部门名称">
              <el-input v-model="search.name" placeholder="请输入菜单名称" class="w-full" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="pl-8px">
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mt-10px bg-[#fff] py-8px px-12px">
      <g-title>
        <div class="w-full flex justify-between items-center">
          <span>部门列表</span>
          <div>
            <el-button type="primary" size="mini" @click="setAllTreeExpand(true)">展开全部</el-button>
            <el-button type="primary" size="mini" @click="setAllTreeExpand(false)">收缩全部</el-button>
            <el-button type="primary" size="mini" @click="onShowDialog('add')">添加部门</el-button>
          </div>
        </div>
      </g-title>
      <div class="overflow-y-hidden h-[calc(100vh-270px)]">
        <vxe-grid
          ref="xVTree"
          resizable
          show-overflow
          row-id="id"
          border
          auto-resize
          size="small"
          height="auto"
          :data="tableTail.list"
          highlight-current-row
          highlight-hover-row
          :scroll-y="{ gt: 20 }"
          :tree-config="{
            transform: true,
            expandAll: false,
            children: 'children',
            parentField: '__pId__',
            rowField: '__id__',
            iconOpen: 'iconfont-ps icon-portal-site-jian',
            iconClose: 'iconfont-ps icon-portal-site-jia'
          }"
          :columns="tableTail.column"
          @toggle-tree-expand="toggleTreeExpand"
        >
          <template #empty>
            <g-empty style="height: 120px"></g-empty>
          </template>

          <template #dictName="{ row }">
            {{ row.name }}
          </template>

          <template #handle="{ row }">
            <el-tooltip content="添加子部门" :enterable="false">
              <el-button type="text" @click="onShowTailVisible('edit', row)">
                <!--                <i class="iconfont-ps el-icon-edit-outline text-primary text-16px"></i>-->
                <i class="iconfont-ps icon-portal-site-tianjia text-primary text-18px"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="编辑" :enterable="false">
              <el-button type="text" @click="onShowTailVisible('edit', row)">
                <!--                <i class="iconfont-ps el-icon-edit-outline text-primary text-16px"></i>-->
                <i class="iconfont-ps icon-portal-site-edit text-primary text-18px"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip :content="`删除`" :enterable="false">
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                :title="`确定删除${row.name} ?`"
                @confirm="onDelDict('2', [row.id])"
              >
                <el-button slot="reference" type="text">
                  <i class="iconfont-ps el-icon-delete text-danger pl-8px text-18px"></i>
                </el-button>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </vxe-grid>
      </div>
    </div>

    <!-- 新增    -->
    <DepartmentAddEditDialog ref="add" :visible.sync="visible.add" :model="1"></DepartmentAddEditDialog>

    <!-- 编辑    -->
    <DepartmentAddEditDialog ref="edit" :visible.sync="visible.edit" :model="2"></DepartmentAddEditDialog>
  </div>
</template>

<script>
import { treeToList } from '@bianpengfei/utils'
import DepartmentAddEditDialog from './components/DepartmentAddEditDialog.vue'
import mock from './mock'
export default {
  components: { DepartmentAddEditDialog },

  data() {
    return {
      search: {
        name: ''
      },
      visible: {
        add: false,
        edit: false
      },
      tableTail: {
        // 字典列表
        loading: true,
        list: [],
        column: [
          {
            title: '部门名称',
            minWidth: '110px',
            align: 'left',
            treeNode: true,
            slots: { default: 'dictName' }
          },
          { field: 'describes', title: '部门描述', align: 'center' },
          { field: 'describes', title: '部门编码', align: 'center' },
          { title: '操作', width: '150px', align: 'center', slots: { default: 'handle' } }
        ]
      }
    }
  },

  computed: {},

  watch: {},

  created() {
    this.tableTail.list = treeToList({ tree: mock, props: { children: 'children' }, retainPaths: true })

    console.log('this.dictTail.list', this.tableTail.list)

    this.$nextTick(() => {
      this.$refs.xVTree.setAllTreeExpand(true)
    })
  },

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {
    toggleTreeExpand() {
      if (Array.isArray(this.$refs.xVTree.getTreeExpandRecords())) {
        const ids = this.$refs.xVTree.getTreeExpandRecords().map((v) => {
          return v.id
        })
        this._defaultExpandIds = [...new Set(ids)]
      }
    },

    onReset() {
      this.search = {
        ...this.search,
        name: ''
      }
    },

    onSearch() {
      alert('搜索')
    },

    setAllTreeExpand(val) {
      this.$refs.xVTree.setAllTreeExpand(val)
    },

    onShowDialog(type) {
      if (type == 'add') {
        this.visible.add = true
        this.$nextTick(() => {})
      } else if (type == 'edit') {
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  ::v-deep .vxe-table {
    .vxe-cell--tree-node {
      .vxe-tree--btn-wrapper {
        width: 22px;
        height: 22px;
        i {
          font-size: 18px;
          //color: $--color-primary;
          color: #333;
        }
      }
      .vxe-tree-cell {
        margin-left: 8px;
      }
    }
  }
}
</style>
